<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <!-- 引入组件库 -->
</head>
<body>
    <div>
        <div id="app">
            <div class="content-header">
                <h1 align="center">统计分析</h1>
                <table align="center">
                    <tr>
                        <td><el-button type="primary" @click="changeYear(2017)">2017年</el-button></td>
                        <td><el-button type="primary" @click="changeYear(2018)">2018年</el-button></td>
                        <td><el-button type="primary" @click="changeYear(2019)">2019年</el-button></td>
                        <td><el-button type="primary" @click="changeYear(2020)">2020年</el-button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
        </div>
        <div class="app-container">
            <div class="box">
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="chart1" style="height:650px;width:800px"></div>
            </div>
        </div>

</body>
<script type="text/javascript">
    var chart = echarts.init(document.getElementById('chart1'));
    // 基于准备好的dom，初始化echarts实例
    new Vue({
        el: '#app',
        data:{
           year1:2017,
            activeIndex:1
        },
        created(){
            this.getData();
        },
        methods:{
            changeYear(year){
                this.year1=year;
                this.getData()
            },

            getData(){
                axios.get("/report/depth/"+this.year1).then((res)=>{
                    chart.setOption({
                        title: {
                            text: this.year1+'年地震深度和发震数（横坐标为地震深度，纵坐标为发震数）'+'地震总数为:'+res.data.total
                        },
                        tooltip: {},
                        legend: {
                            data:['地震数']
                        },
                        xAxis:{

                            data:res.data.describe
                        },
                        yAxis: {
                            type:'value'
                        },
                        series: [{
                            name: '发震数',
                            type: 'bar',

                            data:res.data.data
                        }]
                    });
                });
            }
        }
    })
</script>
</html>